<template>
	<view class="safety forgetPassword">
		<!-- <view class="flex-start" v-if="!isWebpage" @click="goBack(100)">
			<uni-icons type="left" size="20" color="#41644A"></uni-icons>
			<text class="backText">返回</text>
		</view> -->
		<view v-if="isWebpage">
			<view class="forgetText" style="font-size: 32rpx;">
				欢迎使用
			</view>
		</view>
		<view v-else>
			<view class="forgetText">
				<!-- <text>{{pageType==0?'忘记密码':'注册账号'}}</text> -->
				<text>欢迎使用逆伶生物</text>
				<text>Welcome to the niling</text>
			</view>
		</view>
		<view class="weui-phone">
			<view class="code">
				<text>+86</text>
				<image
					src="https://img.2024csnl.com/static/2.x/a24.png"
					mode="">
				</image>
			</view>
			<view class="phone">
				<input
					class="input"
					v-model="phone"
					placeholder="请输入手机号码">
				</input>
			</view>
		</view>
		<view class="weui-codebox">
			<input
				class="input"
				v-model="yzm"
				placeholder="请输入验证码"
				maxlength="6"></input>
			<view
				class="cardBtn flex-center"
				@click="onGetVerificationCode()">
				<text>
					{{isSend ? `${time} S` : "获取验证码"}}
				</text>
			</view>
		</view>
		<view v-if="pageType!=0">
			<view class="weui-input">
				<input
					class="input"
					v-model="InvitationCode"
					placeholder="输入邀请码(选填)"
					:disabled="isWebpage">
				</input>
			</view>
			<view class="weui-input">
				<input
					class="input"
					v-model="password"
					:password="true"
					suffix-icon="lock-fill"
					placeholder="请输入密码" />
			</view>
		</view>
		<view
			v-if="pageType==0"
			class="weui-input">
			<input
				class="input"
				v-model="newPassword"
				:password="true"
				suffix-icon="lock-fill"
				placeholder="请输入新密码" />
		</view>
			
		<view class="checkBigBox flex-center" v-if="pageType==1">
			<checkbox-group @change="selectBox">
				<checkbox value="agree">
					<text @click.stop="">我已阅读并同意</text>
				</checkbox>
			</checkbox-group>
			<text
				@click.stop="onSkip('/package/mine/agreement?pageType=用户注册协议')"
				style="color: #7B61FF;">《用户注册协议》</text>和<text
				@click.stop="onSkip('/package/mine/agreement?pageType=隐私政策')"
				style="color: #7B61FF;">《隐私协议》</text>
		</view>
			
		<view
			class="submitBtn flex"
			@click="submit()">{{pageType==0?'确认修改':'确认注册'}}</view>
			
		<!-- h5注册下载 -->
		<view
			class="submitBtn flex"
			v-if="isWebpage && false">
			<a style="text-decoration: none;
			color: #fff;" :href="downloadUrl">已注册完成,去下载~</a>
		</view>

		
	</view>
</template>

<script>
	import {
		register,
		setForgetPassword,
		getVerificationCode
	} from "../../api/index.js"
	import BrandUa from "./brandua.js";
	export default {
		data() {
			return {
				isChecked: false,
				pageType: 0, //0:忘记密码 1:注册
				InvitationCode: '', //注册邀请码
				password: '', //密码
				newPassword: '', //新密码
				phone: "",
				yzm: "",
				isSend: false,
				time: 60,
				isWebpage: false, //是否网页注册
				downloadUrl: "",
				bid: ""
			}
		},
		onLoad(option) {
			
			if(option.yqcode){
				this.isWebpage = true;
				this.pageType = 1;
			}
			else{
				
				this.isWebpage = option.isWebpage
				this.pageType = option.type
			}
			this.choujiang = option.choujiang
			if (option.bid)
				this.bid = option.bid;

			this.InvitationCode = option.yqcode ? option.yqcode : ''
			

		},
		methods: {
			// 忘记密码
			async onForgetPassword() {
				const {
					phone,
					yzm,
					newPassword
				} = this
				const res = await register(
					`s=/ApiIndex/getpwd&tel=${phone}&pwd=${newPassword}&smscode=${yzm}`)
				const {
					mid,
					socket_token,
					data,
					status,
					msg
				} = res.data
				// console.log(res, "忘记密码")
				this.showToast(msg)
				if (status == 1) {
					setTimeout(() => {
						this.onSkip(`/pages/login/loginAndRegister`)
					}, 1500)
				}
			},
			//注册
			async onRegisteredAccount() {
				const {
					phone,
					yzm,
					password,
					InvitationCode
				} = this
				switch (true) {
					case !/^1[3456789]\d{9}$/.test(phone):
						this.showToast('请输入正确手机号')
						break;
					case !yzm:
						this.showToast('请输入验证码')
						break;
					case !/^\w{6,16}$/.test(password):
						this.showToast('密码长度应为6-16位')
						break;
					case !this.isChecked:
						this.showToast('请先勾选用户协议')
						break;
					default:
						this.onRegister()
						// console.log(res, "注册", data, data.token)
				}
			},
			async onRegister() {
				const {
					phone,
					yzm,
					password,
					InvitationCode
				} = this
				const res = await register(
					`s=/ApiIndex/regsub&tel=${phone}&pwd=${password}&smscode=${yzm}&yqcode=${InvitationCode}`)
				const {
					mid,
					socket_token,
					data,
					status,
					msg
				} = res.data
				console.log(res, "注册")
				this.showToast(msg)
				if (status == 1) {
					this.onSkip(`/pages/login/loginAndRegister?choujiang=${this.choujiang}`)
				}
			},
			// 勾选用户协议
			selectBox(e) {
				// console.log(e, "eeee")
				e.detail.value.length != 0 ? this.isChecked = true : this.isChecked = false
				// console.log(this.isChecked, "***")
			},
			//修改密码
			async onChangePassword() {
				const {
					phone,
					yzm,
					newPassword
				} = this
				switch (true) {
					case !/^1[3456789]\d{9}$/.test(phone):
						this.showToast('请输入正确手机号')
						break;
					case !yzm:
						this.showToast('请输入验证码')
						break;
					case !/^\w{6,16}$/.test(newPassword):
						this.showToast('密码长度应为6-16位')
						break;
					default:
						this.onForgetPassword()
						// 请求
				}
			},

			//发送短信验证码
			async onGetVerificationCode() {
				if (this.isSend) {
					this.showToast("请勿重复发送验证码")
					return;
				}
				if (/^1[3456789]\d{9}$/.test(this.phone)) {
					const res = await getVerificationCode('s=/ApiIndex/sendsms', {
						tel: this.phone
					})
					const {
						status,
						msg
					} = res.data
					this.showToast(msg)
					if (status == 1) {
						this.isSend = true;
						const timer = setInterval((v) => {
							this.time -= 1;
							if (this.time == 0) {
								this.isSend = false;
								this.time = 60;
								clearInterval(timer);
							}
						}, 1000);
					}
				} else {
					this.showToast('请输入正确手机号')
				}
			},
			//提交注册信息
			submit() {
				console.log(this.pageType, 'this.pageTypethis.pageType')
				this.pageType == 1 ? this.onRegisteredAccount() : this.onChangePassword()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.safety {
		height: 100vh;
		background: url('https://img.2024csnl.com/static/2.x/a23.png') center bottom no-repeat #F8F8F8;
		background-size: contain;
	}
	.submitBtn {
		margin: 50rpx 0;
		color: #fff;
		font-size: 34rpx;
		border-radius: 14rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 100rpx;
		justify-content: center;
		background: linear-gradient( 90deg, #41644A  0%, #263A29 100%);
		border-radius: 25px 25px 25px 25px;
	}

	.input {
		background: #F6F4FC;
		border-radius: 20rpx;
		height: 100rpx;
		margin-bottom: 50rpx;
		border: none;
		padding: 0 20rpx;
	}

	.cardBtn {
		background: #EB292E;
		color: #fff;
		border-radius: 15rpx;
		margin-left: 15rpx;
		height: 90rpx;
	}

	.tit {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF3E1E;
	}

	.checkBigBox {
		text-align: center;
		font-size: 26rpx;
		margin-top: 100rpx;
	}

	.codeBox {
		display: grid;
		grid-template-columns: 60% 40%;
	}

	.forgetPassword {
		padding: 88rpx 40rpx;
	}

	.backText {
		color: #41644A;
		margin-left: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
	}

	.forgetText {
		font-size: 48rpx;
		font-weight: bold;
		padding: 100rpx 0;
		text {
			display: block;
			font-weight: normal;
			color: #000000;
			&:nth-child(2) {
				font-size: 28rpx;
				opacity: 0.3;
				text-transform: uppercase;
			}
		}
	}
	
	
</style>